<template>
  <el-dialog title="新增教室" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere >
    <el-form :model="formData"  ref="formData" size="mini" label-width="90px" :rules="rules">
      <el-row :gutter="30">
         <el-col :span="12">
          <el-form-item label="教室名称" prop="name">
            <el-input v-model="formData.name" placeholder="姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="教室容量:" prop="maxnum" >
             <div style="display: flex;">
            <el-input-number v-model="formData.maxnum" style="width:400px;" placeholder="教室可容纳人数"></el-input-number>
            </div>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="5" :maxlength="500" show-word-limit v-model="formData.memo"
              placeholder="备注"></el-input>
          </el-form-item>
        </el-col>

        <el-col style="text-align: center;">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        index:-1,
        dialogVisible: false,
        formData: {
          name: '',
          gender:'男',
          mobile:'',
          address:'',
          idcard:'',
          memo:''
        },
        rules:{
          "name":[{message:"请填写教室名称!",trigger:'blur',required:true}],
          "maxnum":[{message:"请填写可容纳人数!",trigger:'blur',required:true}]
        }
      }
    },
    methods: {
      init(index,data) {
        this.index=index;
        this.formData=data;
      },
      handleCancel() {
        this.dialogVisible = false;
      },
      handleSave() {
         this.$refs.formData.validate(ok=>{
           if(!ok) return;
          const params = {
            roomid:this.formData.roomid,
            name: this.formData.name,
            maxnum: this.formData.maxnum,
            memo:this.formData.memo
          }
          this.api_helper.post("api/admin/educational/classroom/update", params).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.dialogVisible = false;
              this.$emit("complete",this.index,params);
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        });

      }
    }
  }
</script>

<style>
</style>
